<template>
  <el-card class="box-card"
           shadow="always"
           :body-style="{margin: '15px' }"
  >

    <el-tag size="medium" :hit="true" >{{title}}</el-tag>

    <!--这里先暂时全部显示，后面再调整-->
    <div :class="isDisabled ? 'box-card-disable' :'box-card-enable'">
      <el-row>
        <!--   角色       -->
        <el-col :span="12" v-if="isShowRole">
          <auth-object-inner title="角色" :doLoadList="listRole" :auths="data.roles"></auth-object-inner>
        </el-col>
        <!--   部门    -->
        <el-col :span="12" v-if="isShowDept">
          <auth-object-inner title="部门" :doLoadList="listDept" :auths="data.depts"></auth-object-inner>
        </el-col>
      </el-row>
      <el-row>
        <!--   用户    -->
        <el-col :span="12" v-if="isShowUser">
          <auth-object-inner title="用户" :doLoadList="listUser" :auths="data.users"></auth-object-inner>
        </el-col>
        <!--   岗位    -->
        <el-col :span="12" v-if="isShowPosition">
          <auth-object-inner title="岗位" :doLoadList="listPosition"
                             :auths="data.positions"
          ></auth-object-inner>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>

import AuthObjectInner from "./InnerAuthObject";

export default {
  name: 'AuthObjectTemplate',
  components: {
    AuthObjectInner
  },
  props: {
    title:String,
    authObject: {
      type: Object,
      required: true,
      default() {
        return {
          roles: [],
          depts: [],
          users: [],
          positions: [],
        }
      }
    },
    isDisabled:{
      type:Boolean,
      default() {
        return false;
      }
    },
    listRole: {
      type: Function,  //Promise
      required: false
    },
    listDept: {
      type: Function,  //Promise
      required: false
    },
    listUser: {
      type: Function,  //Promise
      required: false
    },
    listPosition: {
      type: Function,  //Promise
      required: false
    }
  },
  computed: {
    data : {
      get(){
        return this.authObject
      },
      set(newVal){
        this.$emit('update:authObject',newVal)
      }
    },
    isShowRole() {
      return this.listRole != null
    },
    isShowDept() {
      return this.listDept != null
    },
    isShowUser() {
      return this.listUser != null
    },
    isShowPosition() {
      return this.listPosition != null
    }
  },
  created() {
    //保证传入的不是空的，只需要push就行了
    let authObject = this.authObject;
    if (authObject.users==null){
      authObject.users=[]
    }
    if (authObject.roles==null){
      authObject.roles=[]
    }
    if (authObject.depts==null){
      authObject.roles=[]
    }
    if (authObject.positions==null){
      authObject.positions=[]
    }
    //console.log('authObject',authObject)
    this.data=authObject
  }
}
</script>


<style scoped lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  //width: 480px;
  min-height: 300px
}


.root-el-row {
  font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  line-height: 1.7
}

.box-card-disable {
  pointer-events: none;
  background-color: rgba(200, 200, 203, 0.6);
}

.box-card-enable {

}
</style>